<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10 表单验证  练习3</title>
<style type="text/css">

	#prompt{
		font-size: 12px;
		color: darkgray ;
	}

	#score{
		border:1px solid darkgray;
	}

	.err{
		color:red !important;
	}

	.right{
		color:green !important;
	}
	
	

</style>

</head>
<body>

	<div id="box">
		<label type="text">你的成绩：</label>
		<input type="text" id="score">
		<span id="prompt">输入成绩</span>
	</div>




<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

function $(id){
	return typeof id=== 'string'?document.getElementById(id):null
}

	$('score').onblur=function(){
		// 1.获取输入内容以及输入内容类型
		var value=parseFloat(this.value)
		console.log(value)//NAN类型，可以isNaN判断是否

		console.log(isNaN(value))//判断为true，离开焦点：true
		
		if(isNaN(value == true)){
			$('prompt').unnetHTML = '输入的成绩不正确'
			this.style.borderColor = 'red'
			$('prompt').className = 'err'
		}else if(value>=0 && value<=100){
			$("prompt").innerHTML = '输入的成绩在0--100之间'
			this.style.borderColor = 'lightgreen'
			$('prompt').className='right'
		}else{
			$('prompt').innerHTML = '输入的成绩不符合要求'
			$('score').className = 'err'
			this.style.borderColor = 'red'
		}

	}


	$('score').onfocus=function(){

		$('prompt').innerHTML = '正在输入成绩'

		// $('scroe').value = ""
		$('score').style.color = "darkgray"
		$('score').style.borderColor= "darkgray"

	}







</script>
	
</body>
</html>